<!-- views/BreadcrumbsView.vue -->
<template>
  <div class="breadcrumbs-demo">
    <h2>基本用法</h2>
    <Breadcrumbs
        :items="[
        { text: '首页', to: '/' },
        { text: '用户中心', to: '/user' },
        { text: '个人资料' }
      ]"
        class="my-breadcrumbs"
        @item-click="handleItemClick"
    />

    <h2>自定义样式和插槽</h2>
    <Breadcrumbs
        :items="[
        { text: '首页', to: '/', icon: IconSupport },
        { text: '商品分类', to: '/category' },
        { text: '电子产品' }
      ]"
        separator=">"
        active-class="custom-active"
        container-class="custom-container"
        item-class="custom-item"
        separator-class="custom-separator"
    >
      <template #item="{ item, isActive }">
        <span :class="{ 'custom-link': !isActive }">
          <component :is="item.icon" v-if="item.icon" />
          {{ item.text }}
        </span>
      </template>

      <template #separator>
        <span class="custom-sep">→</span>
      </template>
    </Breadcrumbs>
  </div>
</template>

<script setup>
import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
import IconSupport from '@/components/icons/IconSupport.vue';

const handleItemClick = (item, event) => {
  console.log('Clicked item:', item);
  // 自定义处理逻辑
};
</script>

<style>
.my-breadcrumbs {
  --link-color: #409eff;
  --active-color: #909399;
}

.custom-container {
  padding: 12px;
  background: #f5f7fa;
}

.custom-item {
  font-size: 0.9em;
}

.custom-separator {
  color: #c0c4cc;
}

.custom-active {
  font-weight: bold;
}

.custom-link {
  color: #606266;
}

.custom-sep {
  margin: 0 12px;
}
</style>